<template>
    <app-layout>
        <view class="dir-top-nowrap recharge" v-if="pageShow">
            <view class="account">我的账户</view>
            <view :style="{'background-image': `url(${appImg.mall.balance_recharge})`}"
                  class="dir-left-nowrap bg cross-center">
                <image class="image box-grow-0" src="./image/icon-balance.png"></image>
                <view class="balance-text box-grow-1">{{ customPage.balance_title }}</view>
                <view class="balance-price box-grow-0">{{ balance }}</view>
            </view>
            <view class="input" :class="selected === -1 && getFocus ? `red`: `grey`" v-if="setting.type == 1">
                <input @focus="bindFocus" placeholder-style="color:#bbbbbb" v-model="pay_price" type="digit"
                       :focus="getFocus"
                       @blur="bludBlur"
                       @input="changeInput"
                       :placeholder="`手动输入` + customPage.recharge_amount_title"/>
            </view>
            <view class="re" v-if="list && list.length">
                <view class="header main-between">
                    <view class="account">充值推荐</view>
                    <view @click="navReward" class="dir-left-nowrap cross-center account h-right">
                        <view>{{ customPage.recharge_explanation_title }}</view>
                        <image :src="appImg.mall.balance_recharge_search"></image>
                    </view>
                </view>
                <view class="box dir-top-nowrap cross-center"
                      :style="{marginBottom: `calc(${emptyHeight}rpx + ${bottomHeight}  + 128rpx)`}">
                    <view v-for="(item,index) in list" :key="index" @click="setPrice(index)"
                          class="box-item dir-left-nowrap cross-center"
                          :class="index === selected ? 'active':''">
                        <view class="box-grow-0 box-left main-center cross-center"
                              :style="{borderRightWidth: ((item.send_type == 32 && c_customPage.is_lottery_open == 1) || (item.send_type != 32 && item.send_type != 0 )) ? '1px' : '0'}">
                            {{ item.pay_price }}元
                        </view>
                        <view class="dir-top-nowrap box-right">
                            <view
                                v-if="((item.send_type == 32 && c_customPage.is_lottery_open == 1) || (item.send_type != 32 && item.send_type != 0 ))"
                                class="box-re dir-left-nowrap cross-center"
                                @click="openItem(item)">
                                <text>充值奖励</text>
                                <image class="bd-icon box-grow-0"
                                       src="../../static/image/icon/arrow-right.png"></image>
                            </view>
                            <view
                                v-if="((item.send_type == 32 && c_customPage.is_lottery_open == 1) || (item.send_type != 32 && item.send_type != 0 ))"
                                class="t-omit-two box-text">
                                <text>送</text>
                                <text class="end" v-if="calcSendType(item.send_type, 1)">
                                    <text style="color:#ff4544">{{ item.send_price }}</text>
                                    <text>余额</text>
                                </text>
                                <text class="end" v-if="calcSendType(item.send_type, 2)">
                                    <text style="color:#ff4544">{{ item.send_integral }}</text>
                                    <text>积分</text>
                                </text>
                                <text class="end" v-if="calcSendType(item.send_type, 4)">
                                    <text v-if="item.member">{{ item.member.name }}</text>
                                </text>
                                <text class="end" v-if="calcSendType(item.send_type, 8)">
                                    <text v-if="item.coupons.length === 1">
                                        <text v-if="item.coupons[0].type == 1" style="color: #ff4544">
                                            {{ item.coupons[0].discount }}折
                                        </text>
                                        <text v-if="item.coupons[0].type == 2" style="color: #ff4544">
                                            {{ item.coupons[0].sub_price }}元
                                        </text>
                                        <text>{{ item.coupons[0].name }}</text>
                                    </text>
                                    <text v-else>优惠券X{{ item.coupons.length }}</text>
                                </text>
                                <text class="end" v-if="calcSendType(item.send_type, 16)">
                                    <text v-if="item.cards.length === 1">{{ item.cards[0].name }}</text>
                                    <text v-else>卡券X{{ item.cards.length }}</text>
                                </text>
                                <text class="end"
                                      v-if="calcSendType(item.send_type, 32) && c_customPage.is_lottery_open == 1">
                                    <text>
                                        <text style="color: #ff4544">{{ item.lottery_limit }}</text>
                                        次抽奖机会
                                    </text>
                                </text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <app-model v-model="display" type="3">
                <template slot="title">
                    <text style="color: #FF4544">{{ lineData.pay_price }}元</text>
                    <text>充值奖励</text>
                </template>
                <template slot="content">
                    <scroll-view scroll-y class="r-scroll">
                        <view v-if="calcSendType(lineData.send_type, 1)">
                            <view class="account top">余额奖励</view>
                            <view class="display-box dir-left-nowrap cross-center">
                                <view class="left box-grow-0 main-center">
                                    <image :src="appImg.mall.icon_balance"></image>
                                </view>
                                <view class="box-grow-0 line"></view>
                                <view class="text">￥{{ lineData.send_price }}余额</view>
                            </view>
                        </view>
                        <view v-if="calcSendType(lineData.send_type, 2)">
                            <view class="account top">积分奖励</view>
                            <view class="display-box dir-left-nowrap cross-center">
                                <view class="left box-grow-0 main-center">
                                    <image :src="appImg.mall.icon_integral"></image>
                                </view>
                                <view class="box-grow-0 line"></view>
                                <view class="text">{{ lineData.send_integral }}积分</view>
                            </view>
                        </view>
                        <view v-if="calcSendType(lineData.send_type, 4)">
                            <view class="account top">会员奖励</view>
                            <view class="display-box dir-left-nowrap cross-center">
                                <view class="left box-grow-0 main-center">
                                    <image :src="appImg.mall.icon_member"></image>
                                </view>
                                <view class="box-grow-0 line"></view>
                                <view v-if="lineData.member" class="text t-omit">
                                    <view v-for="(right,index) in lineData.member.rights" :key="index"
                                          v-text="right.content"
                                    ></view>
                                </view>
                            </view>
                        </view>
                        <view v-if="calcSendType(lineData.send_type, 8)">
                            <view class="account top">优惠券奖励</view>
                            <view class="display-box dir-left-nowrap cross-center"
                                  v-for="(coupon,index) in lineData.coupons" :key="index"
                            >
                                <view class="left box-grow-0 dir-top-nowrap cross-center">
                                    <view class="c-zhe" v-if="coupon.type == 1">{{ coupon.discount }}</view>
                                    <view class="c-price" v-if="coupon.type == 2">{{ coupon.sub_price }}</view>
                                    <view class="c-span" v-if="coupon.min_price > 0">
                                        满{{ coupon.min_price }}元可用
                                    </view>
                                    <view class="c-span" v-else-if="coupon.min_price == 0">
                                        无门槛使用
                                    </view>
                                </view>
                                <view class="box-grow-0 line"></view>
                                <view class="text t-omit">
                                    <view v-if="coupon.type == 1 && coupon.discount_limit">优惠上限：￥{{ coupon.discount_limit }}</view>
                                    <view v-if="coupon.expire_type == 1">有效日期：领取后{{ coupon.expire_day }}天过期</view>
                                    <view v-if="coupon.expire_type == 2">
                                        有效日期：{{ coupon.begin_time }}至{{ coupon.end_time }}
                                    </view>
                                    <view>使用范围：{{ coupon.content }}</view>
                                </view>
                            </view>
                        </view>
                        <view v-if="calcSendType(lineData.send_type, 16)">
                            <view class="account top">卡券奖励</view>
                            <view v-for="(card,index) in lineData.cards" :key="index"
                                  class="display-box dir-left-nowrap cross-center">
                                <view class="left box-grow-0 dir-top-nowrap cross-center">
                                    <image class="box-grow-0 c-image" :src="card.pic_url"></image>
                                    <view class="t-omit">{{ card.name }}</view>
                                </view>
                                <view class="box-grow-0 line"></view>
                                <view class="text t-omit">
                                    <view>剩余{{ card.number }}次</view>
                                    <view v-if="card.expire_type == 1">有效日期：领取后{{ card.expire_day }}天过期</view>
                                    <view v-if="card.expire_type == 2">
                                        有效日期：{{ card.begin_time }}至{{ card.end_time }}
                                    </view>
                                    <view>使用规则：{{ card.description }}</view>
                                </view>
                            </view>
                        </view>
                        <view v-if="calcSendType(lineData.send_type, 32) && c_customPage.is_lottery_open == 1">
                            <view class="account top">抽奖次数奖励</view>
                            <view class="display-box dir-left-nowrap cross-center">
                                <view class="left box-grow-0 main-center">
                                    <image :src="appImg.mall.icon_lottery"></image>
                                </view>
                                <view class="box-grow-0 line"></view>
                                <view class="text">{{ lineData.lottery_limit }}次抽奖机会</view>
                            </view>
                        </view>
                    </scroll-view>

                    <view :style="{margin: '0 24rpx',height: `calc(${emptyHeight}rpx + ${bottomHeight}  + 128rpx)`}">
                        <app-button @click="submit"
                                    :round-size="customPage.recharge_btn_radius+ `rpx`"
                                    :color="customPage.recharge_btn_color"
                                    height="88"
                                    :border-color="customPage.recharge_btn_background"
                                    :background="customPage.recharge_btn_background">{{ customPage.recharge_btn_title }}
                        </app-button>
                    </view>
                </template>
            </app-model>
            <view @click="navLimit(c_customPage.lottery_type)" class="btn-image"
                  v-if="c_customPage.is_lottery_open == 1"
                  :style="{bottom: `calc(${emptyHeight}rpx + ${bottomHeight} + 128rpx + 25rpx)`}">
                <image :src="c_customPage.lottery_icon_url"></image>
            </view>
            <view class="btn" :style="{height: `calc(${emptyHeight}rpx + ${bottomHeight}  + 128rpx)`}">
                <app-button @click="submit"
                            :round-size="customPage.recharge_btn_radius+ `rpx`"
                            :color="customPage.recharge_btn_color"
                            height="88"
                            :border-color="customPage.recharge_btn_background"
                            :background="customPage.recharge_btn_background">{{ customPage.recharge_btn_title }}
                </app-button>
            </view>
        </view>
    </app-layout>
</template>

<script>
import {mapGetters, mapState} from 'vuex';
import appText from '../../components/basic-component/app-rich/parse.vue';
import appModel from '../../components/basic-component/app-model/app-model.vue';

export default {
    name: "recharge",
    computed: {
        ...mapGetters('iPhoneX', {
            emptyHeight: 'getEmpty',
            BotHeight: 'getBotHeight',
        }),
        ...mapState({
            tabBarNavs: state => state.mallConfig.navbar.navs,
            customPage: state => state.mallConfig.recharge_page_custom,
            appImg: state => state.mallConfig.__wxapp_img,
            userInfo: state => state.user.info,
        }),
        bottomHeight() {
          let s = this.tabBarNavs.some(item => {
            return item.url.indexOf('/pages/balance/recharge') !== -1
          })
          if (s) {
            return uni.upx2px(this.BotHeight) + 'px';
          } else {
            return 0 + 'px';
          }
        },
    },
    data() {
        return {
            c_customPage: null,
            lineData: {},
            display: false,
            setting: null,
            list: null,
            pay_price: '',
            balance: '￥',
            selected: -1,
            getFocus: false,
            pageShow: false,
        }
    },
    onShow: function () {
        this.loadData();
    },

    components: {
        appText,
        appModel,
    },
    watch: {
        pay_price: {
            handler: function (newData, oldData) {
                if (newData) {
                    this.selected = -1;
                }
            }
        }
    },

    methods: {
        //baidu运算符wxml无效
        calcSendType(type, num) {
            return type & num;
        },
        navLimit(plugin) {
            if (plugin === 'pond') {
                uni.navigateTo({
                    url: `/plugins/pond/index/index`,
                });
            } else if (plugin === 'scratch') {
                uni.navigateTo({
                    url: `/plugins/scratch/index/index`,
                });
            }
        },
        navReward() {
            uni.navigateTo({
                url: `/pages/rules/index?url=${encodeURIComponent(this.$api.balance.index)}&keys=${JSON.stringify(['setting', 'explain'])}`,
            });
        },
        openItem(column) {
            this.lineData = column;
            this.display = true;
        },
        navMember: function (member) {
            uni.navigateTo({
                url: `/pages/member/upgrade/upgrade?level=${member.level}`
            });
        },
        getSetting: function () {
            const self = this;
            self.$request({
                url: self.$api.balance.index,
            }).then(info => {
                if (info.code === 0) {
                    self.pageShow = true;
                    if (info.data.setting.status === 1) {
                        let {setting, recharge_page_custom, balance} = info.data;
                        self.c_customPage = recharge_page_custom;
                        self.setting = setting;
                        self.balance = '￥' + balance;
                    } else {
                        uni.showModal({
                            title: '提示',
                            content: '尚未开启余额功能',
                            showCancel: false,
                            confirmText: '确定',
                            success(e) {
                                if (e.confirm) {
                                    uni.navigateBack({delta: 1})
                                }
                            }
                        });
                    }
                }
            })
        },
        loadData: function () {
            const self = this;
            self.getSetting();
            self.$showLoading({title: `加载中`});
            self.$request({
                url: self.$api.recharge.index,
            }).then(info => {
                self.$hideLoading();
                if (info.code === 0) {
                    self.list = info.data.list;
                }
            }).catch(info => {
                self.$hideLoading();
            })
        },

        bindFocus: function () {
            this.selected = -1;
            this.getFocus = true;
        },

        bludBlur: function () {
            this.getFocus = false;
        },

        changeInput(e) {
        },
        setPrice: function (index) {
            this.pay_price = '';
            this.selected = index;
        },

        submit: function () {
            const self = this;
            let para, c_send_type, c_lottery_limit;
            if (self.selected === -1) {
                if (self.pay_price > 0) {
                    para = {
                        id: 0,
                        pay_price: self.pay_price,
                        send_price: 0
                    };
                } else {
                    uni.showToast({
                        title: '金额不能为空',
                        icon: 'none',
                    });
                    return;
                }
            } else {
                let {send_type, lottery_limit} = self.list[self.selected];
                c_lottery_limit = Number(lottery_limit);
                c_send_type = send_type;
                para = {
                    id: self.list[self.selected].id,
                    pay_price: self.list[self.selected].pay_price,
                    send_price: self.list[self.selected].send_price,
                }
            }
            self.$showLoading({title: `加载中`});
            self.$request({
                url: self.$api.recharge.balance_recharge,
                data: para,
                method: 'POST',
            }).then(info => {
                self.$hideLoading();
                if (info.code === 0) {
                    self.$payment.pay(info.data.pay_id).then(e => {
                        self.display = false;
                        //实时
                        if (c_lottery_limit && this.calcSendType(c_send_type, 32) && self.c_customPage.is_lottery_open == 1) {
                            uni.showModal({
                                title: '充值成功',
                                content: `恭喜您获得${c_lottery_limit}次抽奖机会！`,
                                showCancel: false,
                                confirmColor: '#FF4544',
                                confirmText: '去抽奖',
                                success(e) {
                                    if (e.confirm) {
                                        uni.navigateTo({
                                            url: `/plugins/${self.c_customPage.lottery_type}/index/index`
                                        });
                                    }
                                }
                            });

                        } else {
                            uni.showModal({
                                title: '提示',
                                content: '充值成功！',
                                showCancel: false,
                                confirmText: '确定',
                                success(e) {
                                    if (e.confirm) {
                                        uni.navigateBack({delta: 1})
                                    }
                                }
                            });
                        }
                    }).catch(e => {
                        //uni.showToast({'title': e, icon: 'none'});
                    });
                } else {
                    uni.showToast({'title': info.msg, icon: 'none'});
                }
            }).catch(info => {
                self.$hideLoading();
            })
        }
    }
}
</script>
<style lang="scss">
page {
    background: #FFFFFF;
}
</style>
<style scoped lang="scss">

.recharge {
    background: #FFFFFF;
    padding: #{40rpx} #{24rpx} 0;
    min-height: 100vh;

    .btn .app-view .app-secondary {
        border-width: 0px !important;
    }

    .account {
        font-size: #{24rpx};
        border-left: #{6rpx} solid #ff4544;
        padding-left: #{24rpx};
        color: #666666;
        margin-bottom: #{32}rpx;
    }

    .account.top {
        margin-top: #{30rpx};
        margin-bottom: #{16rpx};
    }

    .r-scroll {
        background: #f7f7f7;
        max-height: 70vh;
        width: 100%;
        padding: 0 #{24rpx};

        .account {
            margin-top: #{14rpx};
        }

        .account:first-of-type {
            margin-top: #{30rpx};
        }
    }

    .display-box {
        width: 100%;
        background: #FFFFFF;
        border-radius: #{15rpx};
        padding: #{56rpx} 0;
        margin-bottom: #{24rpx};


        .left {
            width: #{168rpx};

            image {
                display: block;
                height: #{72rpx};
                width: #{72rpx};
            }

            .c-zhe, .c-price {
                font-size: #{40rpx};
            }

            .c-span {
                color: #999999;
                font-size: #{20rpx};
            }

            .c-zhe:after {
                content: '折';
                font-size: #{24rpx};
            }

            .c-price:before {
                content: '￥';
                font-size: #{24rpx};
            }

            .c-image {
                display: block;
                border-radius: 50%;
                height: #{88rpx};
                width: #{88rpx};
            }

            view {
                padding: 0 #{15rpx};
                margin-top: #{10rpx};
                font-size: #{20rpx};
                color: #353535
            }
        }

        .line {
            width: 1px;
            height: #{40rpx};
            background: #e2e2e2;
        }

        .text {
            margin: 0 #{20rpx};
            font-size: #{26rpx};
            color: #353535;
            width: 100%;
            -webkit-line-clamp: 4;
        }
    }

    .bg {
        background-repeat: no-repeat;
        background-size: #{702rpx} #{160rpx};
        height: #{160rpx};
        width: #{702rpx};
        color: #666666;

        .image {
            width: #{72rpx};
            height: #{72rpx};
            margin-left: #{40rpx};
        }

        .balance-text {
            font-size: #{42rpx};
            margin-left: #{20rpx}
        }

        .balance-price {
            font-size: #{46rpx};
            margin-right: #{56rpx};
        }
    }

    .amount-text {
        font-size: #{24rpx};
        color: #999999;
        margin-top: #{56rpx};
    }

    .re {
        .header {
            > view:first-child {
                margin-top: #{24rpx};
                margin-bottom: #{32rpx};
            }

            > view:last-child {
                padding-top: #{12rpx};
                padding-bottom: #{12rpx};
                margin-top: #{12rpx};
                margin-bottom: #{20rpx};
            }

            .h-right {
                border-width: 0;

                view {
                    color: #666666;
                    font-size: #{24rpx};
                    margin-right: #{12rpx};
                }

                image {
                    height: #{14rpx};
                    width: #{14rpx};
                    display: block;
                }
            }
        }

        .box {
            .box-item {
                margin-bottom: #{24rpx};
                width: #{702rpx};
                background: #ffffff;
                border-radius: #{15rpx};
                border-width: 1px;
                border-style: solid;
                border-color: #e2e2e2;


                .box-left {
                    font-size: #{32rpx};
                    color: #353535;
                    width: #{210rpx};
                    height: #{59rpx};
                    line-height: #{59rpx};
                    text-align: center;
                    border-right-width: 1px;
                    border-right-style: dashed;
                    border-right-color: #e2e2e2;
                }

                .box-right {
                    padding: #{30rpx} #{26rpx};
                    min-height: #{130rpx};

                    .box-re {
                        margin-right: auto;
                        font-size: #{24rpx};
                        color: #999999;

                        text {
                            margin-right: #{12rpx};
                        }

                        image {
                            height: #{22rpx};
                            width: #{12rpx};
                            display: block;
                        }
                    }

                    .box-text {
                        padding-top: #{6rpx};
                        font-size: #{26rpx};
                        color: #353535;

                        .end:after {
                            content: '、';
                        }

                        .end:last-child::after {
                            content: none;
                        }
                    }
                }
            }

            .box-item.active {
                background: #fff6f6;
                border-color: #ff4544;
            }

            .box-item.active .box-left {
                color: #ff4544;
                border-right-color: #ff4544;
            }
        }
    }

    .select {
        margin: 0 #{-12rpx};

        .box {
            height: #{183rpx};
            width: #{339rpx};
            margin: #{24rpx} #{12rpx} 0 #{12rpx};
            padding: 0 24#{rpx};
            border: #{1px} solid #cccccc;
            border-radius: #{16rpx};

            .price {
                font-size: #{32rpx};
                font-weight: bold;
                color: #666666;
            }

            .send {
                font-size: #{24rpx};
                color: #999999;
            }

            .member-info {
                border: 1#{rpx} solid #999999;
                border-radius: 24#{rpx};
                height: 30#{rpx};
                width: 60#{rpx};
                font-size: 18#{rpx};
                margin-left: 10#{rpx};
            }
        }

        .active {
            border: #{1px} solid #ff4544;

            .price {
                color: #ff4544
            }

            .send {
                color: #ff4544;
            }

            .member-info {
                border-color: #ff4544;
            }
        }
    }

    .input {
        margin-top: #{40rpx};
        border-radius: #{14rpx};

        input {
            color: #666666;
            height: #{88rpx};
            padding: 0 #{12rpx};
        }
    }

    .input.red {
        border: #{1px} solid #ff4544;
    }

    .input.grey {
        border: #{1px} solid #cccccc;
    }

    .btn-image {
        width: #{150rpx};
        height: #{156rpx};
        position: fixed;
        right: #{24rpx};

        image {
            width: 100%;
            height: 100%;
            display: block;
        }
    }

    .btn {
        width: calc(100% - #{48rpx});
        position: fixed;
        bottom: 0;
        background: #FFFFFF;
    }

    .text {
        margin-top: -8rpx;
    }
}
</style>